<template>
  <div class="commodity" style="height:100%">
    <div class="pageTitleSubTitle">
      <div class="title">商品管理</div>
      <div class="btn">
        <a-button type="primary" @click="openModal">导入</a-button>
        <a-button type="primary" @click="openModal">导出</a-button>
        <a-button v-if="configJurisdiction.add" type="primary" @click="openModal"><a-icon type="plus" />添加商品</a-button>
      </div>
    </div>
    <Search :search="search" @searchVal="searchVal"/>
    <div class="storeContent">
      <a-table :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="(record,index) => index" >
        <span slot="picture" slot-scope="picture"><img :src="picture" alt="" style="width: 61px;border-radius: 2px"></span>
        <span slot="area" slot-scope="area">{{area && area.name?area.name:'--'}}</span>
        <span slot="store" slot-scope="store">{{store && store.name?store.name:'--'}}</span>
        <span slot="key" slot-scope="key,record" class="operation">
          <span v-if="configJurisdiction.look" @click="editColumns(record,2)">查看</span>
          <span v-if="configJurisdiction.update" @click="editColumns(record,1)">修改</span>
          <span v-if="configJurisdiction.del" @click="removeStore(record)">{{record.status != 1?'上架':'下架'}}</span>
        </span>
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      width="650px"
      cancelText="关闭"
      okText="保存">
      <Append v-if="visible" @sendData="getAppendData" @sendTit="modalTit" ref="child" :appendData="configAppend" :disableds="disableds" />
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import Pagination from '@/common/pagination/index'
  import Search from '@/common/search/index'
  import Append from './append'
  import { column, appendData } from './index'
  export default {
    name:'commodity',
    components:{Search,Pagination,Append},
    data(){
      return{
        disableds:false,
        visible:false,
        title:'添加商品',
        loading:false,
        page:1,
        total:0,
        edit_id:0,
        configAppend:[],
        columns:column,
        columnsData:[],
        searchText:{},
        search:[
          {
            type:'input',
            name:'商品名称',
            place:'请输入名称',
            val:'',
            key:'name',
          },
          {
            type:'cascader',
            name:'所属分类',
            place:'请选择分类',
            val:[],
            key:['cate_id','cate_sub_id'],
            selectData:[]
          }
        ],
        jurisdiction:[
          { key:'admin-good-detail', back:'look'},
          { key:'admin-good-add', back:'add'},
          { key:'admin-good-update', back:'update'},
          { key:'admin-good-drop-off', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.column = column;
      this.getList();
      this.getCates();
      window.addEventListener('setItem', this.addListen);
      this.configJurisdiction = this.getJurisdiction(2,this.jurisdiction)
    },
    methods:{
      modalTit(e){
        if(this.title.indexOf('添加')>=0){
          this.title = '添加' + e
        }else{
          this.title = '编辑' + e
        }
      },
      addListen(){
        this.page = 1;
        this.getList()
      },
      removeStore(e){
        this.Api.goodStatus({status:e.status == 1?2:1},e.good_no).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.getList()
        })
      },
      editColumns(item,type){
        this.edit_id = item.good_no;
        this.title = type == 1?item.event_type == 2?'编辑商品':'编辑产品':'查看';
        this.disableds = type == 1?false:true;
        this.Api.goodsDetail({},item.good_no).then(res=>{
          item = res.data;
          appendData.forEach(demo=>{
            if(demo.type !== 'tab'){
              demo.val = item[demo.key];
              if(demo.type === 'cascader') demo.val = [item.cate_id,item.cate_sub_id]
            }
          });
          appendData[0].val = item.event_type == 2?'1':'2';
          this.configAppend = appendData;
          this.visible = true
        })
      },
      getAppendData(e){
        this.loading = true;
        setTimeout(()=>{this.loading = false},1000);
        let info = JSON.parse(sessionStorage.getItem('search'));
        let data = {...e,...info};
        if(this.title === '添加商品') return this.Api.wig(data).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.visible = false;
          this.$message.success(res.msg);
          this.page = 1;
          this.getList()
        });
        if(this.title === '编辑商品') return  this.Api.editwig(data,this.edit_id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.visible = false;
          this.$message.success(res.msg);
          this.page = 1;
          this.getList()
        });
        if(this.title === '添加产品') return  this.Api.addGood(data).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.visible = false;
          this.$message.success(res.msg);
          this.page = 1;
          this.getList()
        });
        if(this.title === '编辑产品') return  this.Api.editGood(data,this.edit_id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.visible = false;
          this.$message.success(res.msg);
          this.page = 1;
          this.getList()
        })
      },
      modalChange(type){
        if(type === 1) return this.visible = false;
        this.$refs.child.sendData()
      },
      openModal(){
        this.disableds = false;
        appendData.forEach(item=>{
          item.val = typeof item.key === 'object'?[]:''
        });
        appendData[0].val = '1';
        this.configAppend = appendData;
        this.title = '添加商品';
        this.visible = true;
      },
      searchVal(e){
        this.searchText = e;
        this.page = 1;
        this.getList()
      },
      pageSize(e){
        this.page = e;
        this.getList()
      },
      getCates(){
        this.Api.cates({type:2}).then(res=>{
          let data = res.data;
          data.forEach(item=>{
            item.label = item.name;
            item.value = item.id;
            item.children = item.child;
            item.children.forEach(demo=>{
              demo.label = demo.name;
              demo.value = demo.id;
              demo.children = demo.child;
              if(demo.children && demo.children.length<=0) delete demo.children
            })
          });
          // appendData.forEach(item => {
          //   if (item.type === 'cascader') item.selectData = data
          // });
          this.search.forEach(item => {
            if (item.type === 'cascader') item.selectData = data
          });
        })
      },
      getList(){
        let data = this.searchText;
        data.size = 10;
        data.page = this.page;
        let info = JSON.parse(sessionStorage.getItem('search'));
        let configData = {...data,...info};
        this.Api.goods(configData).then(res=>{
          if(res.code !== 200) return;
          this.columnsData = res.data.items;
          this.total = res.data.total
        })
      }
    }
  }
</script>
